
<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>

<script type="text/javascript">
    var date = new Date();
</script>

<script type="text/javascript">
    jq(document).ready(function(){
        jq('#addReceipt').hide();
        var currmonday;
        if(date.getDay() == 0){
            currmonday = new Date(date.getTime() - 6*24*60*60*1000);
        } else{
            currmonday = new Date(date.getTime() - (date.getDay()-1)*24*60*60*1000);
        }
        showWeek(currmonday, getSundayWeek(currmonday));

        jq("#gridweek").jqGrid({
            url:'/user/weeksummary',
            datatype:'json',
            mtype:'GET',
            colNames:['Lodging', 'Meals', 'Transportation/Fuel/Parking', 'Personal', 'Misc', 'Paid by cash', 'Total'],
            colModel:[
                {name:'lodging', index:'lodging', width:55, align:"center", edit:false},
                {name:'meals', index:'meals', width:55, align:"center", edit:false},
                {name:'transporation', index:'transporation', width:180, align:"center", edit:false},
                {name:'personal', index:'personal', width:65, align:"center", edit:false},
                {name:'misc', index:'misc', width:45, align:"center", edit:false},
                {name:'cash', index:'cash', width:85, align:"center", edit:false},
                {name:'total', index:'total', width:65, align:"center", edit:false}
            ],
            postData:{
            },
            rowNum:1,
            height:40,
            autowidth:false,
            rownumbers:true,
            sortname:'date',
            viewrecords:true,
            sortorder:"asc",
            caption:"User Week Summary Report",
            emptyrecords:"Empty records",
            loadonce:false,
            loadComplete:function () {
            },
            jsonReader:{
                root:"rows",
                page:"page",
                total:"total",
                records:"records",
                repeatitems:false,
                cell:"cell",
                id:"id"
            }
        });

        jq("#grid").jqGrid({
            url:'/user/nextweek',
            datatype:'json',
            mtype:'GET',
            colNames:['No','Date', 'PaidTo', 'Description', 'Lodging', 'Meals', 'Transportation', 'Personal', 'Misc', 'Total'],
            colModel:[
                {name:'no', index:'no', width:25, align:"center", edit:false},
                {name:'date', index:'date', width:55, align:"center", editable:true},
                {name:'paidto', index:'paidto', width:55, align:"center", editable:true},
                {name:'description', index:'description', width:55, align:"center", editable:true},
                {name:'lodging', index:'lodging', width:55, align:"center", editable:true},
                {name:'meals', index:'meals', width:55, align:"center", editable:true},
                {name:'transportation', index:'transportation', width:55, align:"center", editable:true},
                {name:'personal', index:'personal', width:55, align:"center", editable:true},
                {name:'misc', index:'misc', width:55, align:"center", editable:true},
                {name:'total', index:'total', width:55, align:"center", editable:true}
            ],
            postData:{
            },
            rowNum:10,
            rowList:[20, 40, 60],
            height:200,
            autowidth:true,
            rownumbers:true,
            pager:'#pager',
            sortname:'date',
            viewrecords:true,
            sortorder:"asc",
            caption:"User Week Report",
            emptyrecords:"Empty records",
            loadonce:false,
            loadComplete:function () {
            },
            jsonReader:{
                root:"rows",
                page:"page",
                total:"total",
                records:"records",
                repeatitems:false,
                cell:"cell",
                id:"id"
            }
        });
        jq("#grid").jqGrid('navGrid', '#pager',
                {edit:false, add:false, del:false, search:true},
                { },
                { },
                { },
                {
                    sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
                    closeOnEscape:true,
                    multipleSearch:true,
                    closeAfterSearch:true }
        );
        setDates();
    });

    function showWeek(monday, sunday){
        date = monday;
        var datefrom = document.getElementById("date");
        datefrom.innerHTML = (monday.toDateString()+" - "+sunday.toDateString());
    }

    function getPrevMonday() {
        date = new Date(date.getTime() - ( (6+(date.getDay()||7))*24*60*60*1000 ));
        return date;
    }

    function getSundayWeek(monday){
        return new Date(monday.getTime() + 6*24*60*60*1000);
    }

    function getNextMonday(){
        date = new Date(date.getTime() + ( (6+(date.getDay() || 7))*24*60*60*1000 ));
        return date;
    }

    function nextWeek(){
        showWeek(getNextMonday(), getSundayWeek(date));
        doAjaxPost();
    }

    function prevWeek(){
        showWeek(getPrevMonday(), getSundayWeek(date));
        doAjaxPost();
    }

    function addReceipt(){

        jq('#addReceipt').dialog({
            width: 420,
            height: 480,
            modal: true,
            buttons: {
                "Create a receipt": function() {
                    jq( this ).dialog( "close" );
                },
                "Cancel": function() {
                    jq( this ).dialog( "close" );
                }
            }
        });
    }
</script>

<table>
    <tr>
        <td>
            Current week: <span id="date"/>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td width="50">
            <form action="prev" value="prevweek">
                <input type="button" value="Prev" onclick="prevWeek()"/>
            </form>
        </td>
        <td width="50">
            <form action="next" value="nextweek">
                <input type="button" value="Next" onclick="nextWeek()"/>
            </form>
        </td>
    </tr>
</table>

<script type="text/javascript">
    function doAjaxPost() {
        jq.ajax({
            type:"POST",
            url:"/user/nextweek",
            dataType:"JSON",
            data:{
                date: date,
                rows: 1,
                page: 1
            },
            error:function (e) {
                alert('Error: ' + e);
            }
        });
    }
</script>


<div id="jqgridweek">
    <p>
        <table id="gridweek">
            Week summary:
        </table>
    </p>
    <div id="pagerweek"/>
</div>


<div id="jqgrid">
    <p>
        <table id="grid">
            Week report:
        </table>
    </p>
    <div id="pager"/>
</div>

<div id="buttons" align="right">
    <table id="button">
        <tr>
            <td><input type="button" value="Add new receipt" onclick="addReceipt()"/></td>
            <td width="1200"/>
            <td><input type="button" value="Generate"/></td>
            <td><input type="button" value="Save"/></td>
            <td><input type="button" value="Submit"/></td>
        </tr>
    </table>
</div>

<div id="addReceipt" title="Create new receipt">
    <form>
        <table>
           <tr>
                <th class="lable">Description:</th>
                <td id="description">
                    <form id="drop_down_box">
                        <select name="menu" size="1">
                            <option selected="selected" value="meal">MEAL</option>
                            <option value="fuel">FUEL</option>
                            <option value="lodhing">LODGING</option>
                            <option value="grogery">GROGERY</option>
                            <option value="other">OTHER</option>
                        </select>
                    </form>
                </td>
            </tr>
            <tr>
                <th class="lable">By cash</th>
                <td class="input"><input id="bycash" type="checkbox" value="true" /></td>
            </tr>
            <tr>
                <th class="lable">Paid to:</th>
                <td class="input"><input id="paidTo" size="20" class="input" type="text"></td>
            </tr>
            <tr>
                <th class="lable">Date:</th>
                <td class="input"><input id="datet" size="20" class="input" type="text"></td>
            </tr>
            <tr>
                <th class="lable">Meals:</th>
                <td class="input"><input id="meals" size="20" class="input" type="text"></td>
            </tr>
            <tr>
                <th class="lable">Lodging:</th>
                <td class="input"><input id="lodging" size="20" class="input" type="text"></td>
            </tr>
            <tr>
                <th class="lable">Personal:</th>
                <td class="input"><input id="personal" size="20" class="input" type="text"></td>
            </tr>
            <tr>
                <th class="lable">Transporation:</th>
                <td class="input"><input id="transporation" size="20"  class="input" type="text"></td>
            </tr>
            <tr>
                <th class="lable">Misc:</th>
                <td class="input"><input id="misc" size="20"  class="input" type="text"></td>
            </tr>
        </table>
    </form>
</div>


